<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表问题</title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/index.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/ueditor/umeditor.min.js"></script>
    <link href="/js/plugins/datepicker/datepicker.css" rel="stylesheet">
    <script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="/js/system/index.js"></script>
    <script type="text/javascript" src="/js/system/common.js"></script>
    <link href="/js/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <link href="/styles/communityInput.css" rel="stylesheet" type="text/css">
    <script>
        $(function () {
            // 初始化富文本编辑器
            ue = UM.getEditor('editor',{
                textarea:"travelContent.content",
                imageUrl:"/travel/contentImage",
                imageFieldName:"upfile",
                //UMEDITOR_HOME_URL:"/",
                imagePath:''
            });

        })
    </script>
</head>

<body style="position:relative;">
<#include "../common/navbar.ftl"/>

<div class="qt-container clearfix">
    <!-- 提问主要内容 -->
    <div class="qt-main">
        <!-- 面包屑导航 -->
        <div class="crumb">
            <a href="/wenda/">旅游问答</a> &gt; <span>我要提问</span>
        </div>

        <!-- 问题标题 -->
        <div class="qt-tit">
            <h5>问题标题</h5>
            <div class="qt-con">
                <input type="text" placeholder="标题不小于10字哦" class="_j_title" id="title">
                <span class="count"><span class="_j_title_num">0</span>/80 字</span>
                <span class="_j_min_num hide">10</span>
                <span class="error err-tips _j_title_error hide"></span>
            </div>
        </div>

        <!-- 问题详细内容 -->
        <div class="qt-details" id="_qa_detail">
            <script>
                $(function () {
                    $("#_j_show_content").click(function () {
                        if ($(".content_div").hasClass("on")) {
                            $(".content_div").removeClass("on").css("display", "none")
                        } else {
                            $(".content_div").addClass("on").css("display", "block")
                        }
                    })
                })
            </script>
            <h5><a style="background:url('/images/mfwask-qt_v2.png')" title="添加问答内容" class="icon" id="_j_show_content"></a>问题详细内容</h5>

            <div class="content_div" style="display: none;width:700px">
                <script class="_j_mdd_list_div" id="editor" type="text/plain" style="width:670px;height:200px;">
                </script>
            </div>
        </div>
            <dl class="body cf">
                    <dd id="content_div">
                    <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
                </dd>
            </dl>
        <script>
            $(function () {
                $("._j_mdd").click(function () {
                    $("._j_mdd_list_div").css("display", "block")

                });
                $("._j_mdd").blur(function () {
                    $("._j_mdd_list_div").css("display", "none")
                })
                $("#editor").click(function () {

                })
            })
        </script>
        <!-- 选择目的地 -->
        <div class="qt-mdd _qa_block" id="_qa_mdd">
            <h5>选择目的地</h5>
            <div class="qt-con _qa_select" id="_qa_select_mdds">
                <select  style="width: 40%" id="destination">
                    <option data-id="0" value="-1"><a>--请选择--</a></option>
                <#list destination as d>
                    <option data-id="${d.id}" value="${d.id}"><a>${d.name}</a></option>
                </#list>
                </select>
                <div class="qt-error"><span class="_j_mdd_error">请选择目的地！</span></div>
            </div>
        </div>

        <div class="qt-interest _qa_block" id="_qa_interest">
            <h5>选择兴趣标签</h5>
            <div class="qt-con _j_interest_list">
                <dl class="interest-description">
                    <dt><i></i><span>什么是兴趣标签</span></dt>
                    <dd>兴趣标签是一个问题的类型，它有助于为你的问题匹配擅长该类问题的蜂蜂回答。目前仅开放了以下几个话题，更多类型我们会逐步开放。</dd>
                </dl>

                <div class="interest-tags">
                    <a class="btn-interest _j_interest" id="tag" data-id="1">自驾</a>
                    <a class="btn-interest _j_interest" id="tag" data-id="2">亲子</a>
                    <a class="btn-interest _j_interest" id="tag" data-id="3">摄影</a>
                    <a class="btn-interest _j_interest" id="tag" data-id="4">美食</a>
                    <a class="btn-interest _j_interest" id="tag" data-id="5">滑雪</a>
                    <a class="btn-interest _j_interest" id="tag" data-id="6">购物</a>
                    <a class="btn-interest _j_interest" id="tag" data-id="7">徒步</a>
                </div>


            </div>
        </div>
        <script>
            $(function () {
                $("._j_interest").click(function () {
                    if ($(this).hasClass("on")) {
                        $(this).removeClass("on");
                        $(this).css("border", "1px solid #bdbfc2");
                        $(this).css("background-color", "");
                    } else {
                        $(this).addClass("on").css({"border": "#ff9d00"}, {"background-color": "#ff9d00"});
                    }
                })
            })
        </script>

        <#--<!-- 通知 &ndash;&gt;-->
        <#--<div class="qt-notice">-->
            <#--<div class="checkbox _j_anonymous"></div>-->
            <#--<p>匿名提问（其他用户将不会在你的窝里看到这个问题）</p>-->
        <#--</div>-->
        <#--<div class="qt-notice _qa_block" id="_qa_notice">-->
            <#--<div class="checkbox _j_mobile active"></div>-->
            <#--<p>收到答案时短信通知我</p>-->
        <#--</div>-->

        <!-- 发布按钮 -->
        <div class="publish_question">
            <a class="qt-post-btn _j_publish" title="发布问题" id="problem">发布问题</a>
        </div>

    </div>
    <script>
        $(function () {
            var vserion=getParamAnswer();
            var coverUrl;
            $("#editor").click(function () {
                coverUrl =$("#editor img").attr("src");
                console.log(1111);
                console.log(coverUrl);
            }),
            $("#problem").click(function () {
                var title= $("#title").val();
                var detailId=$("#destination").val();
                var detailName=$("#destination [value="+detailId+"]").html();
                var content=$("#editor").html().trim();
                var tagename=$(".interest-tags .on");
                var arr=[];
                console.log(vserion);
                var num1 = vserion.vserion;
                $.each(tagename,function (index,option) {
                    var tageName=$(this).html();
                    arr.push(index+1);
                    arr.push(tageName);
                })
                $.post("/answer/saveOrupdate",{vserion:num1,title:title,coverUrl:coverUrl,content:content,aswerTag:arr,destId:detailId,destName:detailName},function (data) {
                    if(data.success){
                        alert("提问成功,两秒跳转到社区回答首页")
                        setTimeout(function () {
                            window.location.href="/answer/list"
                        },2000)
                    }else {
                        alert("提问失败,请检查填写内容");
                    }
                })
            })
        })
    </script>
    <!-- 提问侧边栏 -->
    <div class="qt-sider">
        <div class="qts-tit">提问的正确姿势</div>
        <div class="qts-con">
            <p>1.问题要【具体】【真实】【诚恳】，问题较多，需全面阐述时，可以添加问题补充。结伴/交易/与旅行无关的提问将被删除。</p>
            <p>2.给问题添加目的地，并打上正确的标签将有助于更快地获得回答。</p>
        </div>
    </div>
    <div class="mfw-toolbar" id="_j_mfwtoolbar" style="display: block;">
        <div class="toolbar-item-top" style="display: none;">
            <a role="button" class="btn _j_gotop">
                <i class="icon_top"></i>
                <em>返回顶部</em>
            </a>
        </div>
        <div class="toolbar-item-feedback">
            <a role="button" data-japp="feedback" class="btn">
                <i class="icon_feedback"></i>
                <em>意见反馈</em>
            </a>
        </div>
        <div class="toolbar-item-code">
            <a role="button" class="btn">
                <i class="icon_code"></i>
            </a>
            <a role="button" class="mfw-code _j_code">


                <img src="https://p1-q.mafengwo.net/s1/M00/6C/51/wKgIC1t_6TuASybrAADGUPUHjr021.jpeg?imageMogr2%2Fthumbnail%2F%21450x192r%2Fgravity%2FCenter%2Fcrop%2F%21450x192%2Fquality%2F90"
                     width="450" height="192">
            </a>
            <!--<div class="wx-official-pop"><img src="http://images.mafengwo.net/images/qrcode-weixin.gif"><i class="_j_closeqrcode"></i></div>-->
        </div>
    </div>
</div>
<#include "../common/footer.ftl"/>
</body>
</html>